<template>
  <div class="home">
    <!-- 添加商品按钮 -->
    <div class="center">
      <el-button type='primary' @click="AddProductBtn">添加商品</el-button>
    </div>
    <!-- //列表展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="商品id" width="100"></el-table-column>
      <el-table-column prop="title" label="商品名称" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="image" label="商品图片" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="sellPoint" label="商品卖点" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
      <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
      <el-table-column prop="descs" label="商品描述" show-overflow-tooltip></el-table-column>
      <el-table-column  label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="bianji(scope.row)" type="" size="small">编辑</el-button>
          <el-button type="danger" @click="shanchu(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="center">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page='currentPage'
        @current-change='changePage'
        :total="20">
      </el-pagination>
    </div>
    <!-- 对话框 -->
      <el-dialog 
        title="添加产品" 
        :visible.sync="outerVisible"
        width='80%'
      >
        <el-dialog
          width="60%"
          title="商品类目"
          :visible.sync="innerVisible"
          append-to-body>
          <productTree @getleimu='getName'/>
          <!-- 点击确定按钮时，请求当前类目的规格参数 -->
          <el-button type="primary" @click="getGuiGe(cid)">确定</el-button>
        </el-dialog>
        <!-- form表单 -->

          <AddProduct
            :preGuiGe='preGuiGe'
            :guige='guige' 
            :preData='preData'
            :cid='cid'
            :leimu='leimu'
            :innerVisible='innerVisible'
            :outerVisible='outerVisible'
            @changeInner='changeInner'
            @changeOuter='changeOuter'
            @getdata='getdata'
            @clearCid='clearCid'
          />
      </el-dialog>
  </div>
</template>

<script>
import AddProduct from './AddProduct'
import productTree from './productTree'
export default {
  name: "Home",
  data(){
    return{
      tableData:[],
      currentPage:1,
      outerVisible:false,
      innerVisible:false,
      leimu:'',
      cid:'',
      preData:{},
      guige:{},
      preGuiGe:{}
    }
  },
  components: {
    AddProduct,
    productTree
  },
  methods:{
    //获取规格参数
    getGuiGe(cid){
      this.innerVisible = false;
      this.$api.getSelectItemParamById({id:cid})
      .then(data=>{
        console.log(data)
        if(data.length>0){
          this.guige=data[0]
        }
        // else{
        //   this.guige={}
        // }
      })
    },
    //点击添加商品按钮
    AddProductBtn(){
      this.outerVisible = true
      //初始化
      this.preData={};
      this.guige={}
    },
    //清空类目与cid
    clearCid(){
      this.leimu=''
      this.cid=''
    },
    //添加商品中获取类目名称
    getName(data){
      this.leimu=data.name
      this.cid=data.cid
    },
    //修改innerVisible的值
    changeInner(v){
      this.innerVisible=v
    },
    //修改outerVisible的值
    changeOuter(v){
      this.outerVisible=v
    },
    getdata(page){
      this.$api.getSelectProduct(page)
      .then(data=>{
        console.log(data)
        this.tableData=data.data.result
      })
    },
    // 分页器分页请求数据
    changePage(page){
      console.log(page)
      this.currentPage=page;
      this.getdata(page)
    },
    bianji(row){
      console.log(row)
      this.$api.getPreUpdateItem({id:row.id})
      .then(data=>{
        console.log(data)
        if(data.status==200){
          this.outerVisible=true;
          this.preData=data.data
        }
      })
      //规格参数
      this.getGuiGe(row.cid);
      //规格参数预更新
      this.$api.getPreUpdateItemParamContent({id:row.id})
      .then(data=>{
        console.log(data)
        this.preGuiGe=data.data;
      })
    },
    shanchu(row){
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.getDeleteItemById({id:row.id})
          .then(data=>{
            console.log(data)
            if(data.status==200){
              this.getdata(1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else{
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
              
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  mounted(){
    this.getdata(this.currentPage)
    this.$api.getSelectItemParamById({id:'100001'})
    .then(data=>{
      console.log(data)
    })
  },
  watch:{
      guige(n){
          this.guige=n;
      },
      preGuiGe(n){
        this.preGuiGe=n;
      }
  }
};
</script>
<style scoped>
.center{
  margin: 10px 0;
  text-align: center;
}
</style>
